<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <!-- 父级数据通过属性绑定（v-bind:） 的形式,传递子组件使用 -->
  <clo :value="message" :click=personChangemessageClick></clo>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      message: "父组件传下来的消息"
    },
    methods: {
      personChangemessageClick(msg) {
        this.message = msg
      }
    },

    components: {
      clo: {
        // 注意： props 数组中，先定义，后才用这个数据 , 组件中的 所有 props中的数据，都是通过 父组件传递给子组件的
        // props 中的数据，都是只读的，无法重新赋值
        // props: ["value"],
        // props: { value: Number },
        props: { value: { type: Number, required: true }, click: { type: Function, required: true } },
        template: '<h3 @click="change()">哈哈++++{{value}}</h3>',
        data: function () {
          return {};
        },
        methods: {
          change() {
            this.value = '被修改了'
          }
        },
      },
    }
  })
</script>